<template>
	 
	<t-card header="选择本地word文件做为模板或者直接编辑模板" >
		<div style="display:none">
			<t-input v-model="templateId" style="display:none"></t-input>
		</div>
		<t-space direction="vertical">
			<t-space direction="horizontal">
				
				
				<t-input v-model="templateContent.title" placeholder="填写模版名称" ></t-input>
			<wordConvert @success="uploadSuccessHandler"></wordConvert>
			<t-button @click="save">保存模板</t-button>
			<t-button theme="default" @click="showAllTemplates">查看所有模板</t-button>
			</t-space>
			<t-textarea v-model="templateContent.description" placeholder="填写模版描述"></t-textarea>
			<Tinymce ref="editor" v-model="content" @save="save" width="100%" />
		</t-space> 
	</t-card> 
	<t-drawer :visible="drawerVisible" :footer="null" :onClose="_=>drawerVisible=false" header="文档模板列表" size="medium">
		<t-empty v-if="templateData.value==[]"></t-empty>
		<t-list v-else>
		    <t-list-item v-for='item in templateData'>
		      <t-list-item-meta :title="JSON.parse(item.value).title" :description="JSON.parse(item.value).description" />
				<template #action>
					<t-link theme="primary" hover="color" style="margin-left: 16px" @click="editTemplate(item)"> 编辑</t-link>
					 <t-popconfirm content="确认删除吗" @confirm="delTemplate(item.id)">
						<t-link theme="primary" hover="color" style="margin-left: 16px"> 删除</t-link>
				   </t-popconfirm>
			    </template>
		    </t-list-item>
		  </t-list>
	</t-drawer>
</template>
<script type="ts">
export default {
  name: 'docTemplates',
};
</script>
<script setup>
import { ref ,computed,watch} from 'vue'
import { MessagePlugin } from 'tdesign-vue-next';
import Tinymce from '../../../components/editor/tinymce/index.vue';
import wordConvert from '../../../components/wordConvert.vue';
import {getSettingsList,saveSettings,deleteSettings} from '@/api/settings'
import { template } from 'lodash';
 
const content = ref('')
const editor=ref(null)
const templateKey=ref('')
const uploadSuccessHandler=(ret)=>{
	//console.log('uploadSuccessHandler',JSON.stringify(ret))
	content.value=ret
	editor.value.setContent(content.value);
  }
const save=()=>{
	if(templateContent.value.title=='')
	{
		MessagePlugin.error('模版标题为必填项')
		return;
	}
	if(templateKey.value=='')
	{
		let date = new Date();
		   let timestamp = date.getTime();
		   templateKey.value='docTemplate-'+timestamp.toString();
	}
	let data=[]
	let s=editor.value.getContent();
	templateContent.value.content=s;
	var setting={
      id:templateId.value,
      created_by:'1',
      flags:'',
      group:'doc-templates',
      key:templateKey.value,
      type:'html',
      updated_by:'',
      value:JSON.stringify(templateContent.value) ,
      order:0
    }
	      data.push(setting)
	      saveSettings(data)
	      .then(ret=>{
	        MessagePlugin.success('保存成功');
	      })
	      .catch(e=>{
	        if(e.message)
	        {
	          MessagePlugin.error(e.message);
	        }else
	        {
	          MessagePlugin.error(e.msg);
	        }
	      })
	 
}
const templateId=ref('')
const delTemplate=(id)=>{
	deleteSettings(id)
	.then(ret=>{
		MessagePlugin.success('删除成功')
		getTemplates()
	})
}
const editTemplate=(item)=>{
	templateId.value=item.id
	templateContent.value=JSON.parse(item.value)
	templateKey.value=item.key
	editor.value.setContent(templateContent.value.content);
}
const drawerVisible=ref(false)
const showAllTemplates=()=>{
	drawerVisible.value=true
}
const templateData=ref([])
const templateContent=ref({
	title:'',
	description:'',
	content:''
})
const getTemplates=()=>{
	getSettingsList('doc-templates')
	.then(ret=>{
		console.log(JSON.stringify(ret))
		if(ret==[])
		templateData.value=[]
		else
		{
			templateData.value=ret
		}
	})
}
watch(()=>drawerVisible.value,
()=>{
	if(drawerVisible.value==true)
	{
		getTemplates()
	}
})
/*
{
   title: 'My Template 2',
   description: 'This is the second template',
   content: '<h1>Template content 2</h1>'
}
*/
</script>
 